<template>
  <div class="radio-container">
    <!-- <div class="radio-group" id="type">
      类型：
      <input type="radio" v-model="pickedType" value="all-type" id="all-type" />
      <label for="all-type">全部</label> -->
      <!-- <input type="radio" v-model="pickedType" value="file" id="file" />
      <label for="file">资源</label>
      <input type="radio" v-model="pickedType" value="blog" id="blog" />
      <label for="blog">博客</label>
      <input type="radio" v-model="pickedType" value="user" id="user" />
      <label for="user">用户</label> -->
    <!-- </div> -->

    <div class="radio-group" id="suffix" v-show="suffixIsShow">
      格式：
      <input
        type="radio"
        v-model="pickedSuffix"
        value="all-suffix"
        id="all-suffix"
      />
      <label for="all-suffix">全部</label>
      <input type="radio" v-model="pickedSuffix" value="doc" id="doc" />
      <label for="doc">doc</label>
      <input type="radio" v-model="pickedSuffix" value="pdf" id="pdf" />
      <label for="pdf">pdf</label>
      <input type="radio" v-model="pickedSuffix" value="ppt" id="ppt" />
      <label for="ppt">ppt</label>
      <input type="radio" v-model="pickedSuffix" value="xlsx" id="xlsx" />
      <label for="xlsx">xlsx</label>
      <input type="radio" v-model="pickedSuffix" value="txt" id="txt" />
      <label for="txt">txt</label>
      <input type="radio" v-model="pickedSuffix" value="zip" id="zip" />
      <label for="zip">zip</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickedType: "all-type",
      pickedSuffix: "all-suffix",
      suffixIsShow: false,
    };
  },
  watch: {
    pickedType(newType) {
      if (newType === "file") this.suffixIsShow = true;
      else this.suffixIsShow = false;
    },
  },
};
</script>

<style scoped>
.radio-container {
  width: 100%;
  max-height: 100px;
}
.radio-group {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  color: #a3a6a4;
  display: inline-block;
  width: 40px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 4px;
  margin-right: 12px;
}
input[type="radio"]:checked + label {
  color: white;
  background-color: #005a95;
}
</style>
